<template>
  <div class="container">
    <div class="container-item-header">
      <div class="header-content">
        <div class="header-left subtitle-class">
          <em>{{subtitle}}</em>
        </div>
        <div class="header-center project-title-class">{{projectTitle}}</div>
        <div class="header-right">
          <div class="datetime-class">{{datetime}}</div>
        </div>
      </div>
    </div>
    <div class="container-item-content-one item-one">
      <div class="row-container">
        <div v-for="(item, index) in winderList" :key="'winder_' + index" class="row-column">
          <div class="row-column-container">
            <div style="padding: 10px;display: flex; flex-direction: column; height: 100%;box-sizing: border-box;">
              <div style="color: black; text-align: center;flex: 1;" class="base-item-title-font-size">{{item.name}}</div>
              <div style="flex: 1;">
                <div class="base-tag base-btn row-column-item-tag-row">
                  <div class="tag-left">机台号：</div>
                  <div class="tag-right">{{item.winder && item.winder.leftAxis ? item.winder.leftAxis.mid : "-"}}</div>
                </div>
              </div>
              <div style="flex: 1;">
                <div class="base-tag base-btn row-column-item-tag-row">
                  <div class="tag-left">条码：</div>
                  <div class="tag-right">{{item.winder && item.winder.leftAxis ? item.winder.leftAxis.code : "-"}}</div>
                </div>
              </div>
              <div style="flex: 1;" class="row-column-item-tag">
                <el-tag type="success" effect="dark" color="#328080" class="base-tag base-btn row-column-item-tag-content-item border-color-null">
                  叠厚：{{item.winder && item.winder.leftAxis ? item.winder.leftAxis.thick : "-"}}
                </el-tag>
                <el-tag type="info" effect="dark" color="#328080" class="base-tag base-btn row-column-item-tag-content-item border-color-null">
                  线径：{{item.winder && item.winder.leftAxis ? item.winder.leftAxis.diameter : "-"}}
                </el-tag>
              </div>
              <div style="flex: 1;" class="row-column-item-tag">
                <el-tag type="success" effect="dark" color="#328080" class="base-tag base-btn row-column-item-tag-content-item border-color-null">
                  匝数：{{item.winder && item.winder.leftAxis ? item.winder.leftAxis.turns : "-"}}
                </el-tag>
                <el-tag type="info" effect="dark" color="#328080" class="base-tag base-btn row-column-item-tag-content-item border-color-null">
                  产量：{{item.winder && item.winder.leftAxis ? item.winder.leftAxis.output : "-"}}
                </el-tag>
              </div>
              <div style="flex: 1;">
                <div class="base-tag base-btn row-column-item-tag-row">
                  <div class="tag-left">机台号：</div>
                  <div class="tag-right">{{item.winder && item.winder.rightAxis ? item.winder.rightAxis.mid : "-"}}</div>
                </div>
              </div>
              <div style="flex: 1;">
                <div class="base-tag base-btn row-column-item-tag-row">
                  <div class="tag-left">条码：</div>
                  <div class="tag-right">{{item.winder && item.winder.rightAxis ? item.winder.rightAxis.code : "-"}}</div>
                </div>
              </div>
              <div style="flex: 1;" class="row-column-item-tag">
                <el-tag type="success" effect="dark" color="#328080" class="base-tag base-btn row-column-item-tag-content-item border-color-null">
                  叠厚：{{item.winder && item.winder.rightAxis ? item.winder.rightAxis.thick : "-"}}
                </el-tag>
                <el-tag type="info" effect="dark" color="#328080" class="base-tag base-btn row-column-item-tag-content-item border-color-null">
                  线径：{{item.winder && item.winder.rightAxis ? item.winder.rightAxis.diameter : "-"}}
                </el-tag>
              </div>
              <div style="flex: 1;" class="row-column-item-tag">
                <el-tag type="success" effect="dark" color="#328080" class="base-tag base-btn row-column-item-tag-content-item border-color-null">
                  匝数：{{item.winder && item.winder.rightAxis ? item.winder.rightAxis.turns : "-"}}
                </el-tag>
                <el-tag type="info" effect="dark" color="#328080" class="base-tag base-btn row-column-item-tag-content-item border-color-null">
                  产量：{{item.winder && item.winder.rightAxis ? item.winder.rightAxis.output : "-"}}
                </el-tag>
              </div>
            </div>
          </div>
        </div>
        <div v-for="(item, index) in welderList" :key="'welder_' + index" class="row-column">
          <div class="row-column-container">
            <div style="padding: 10px;display: flex; flex-direction: column; height: 100%;box-sizing: border-box;">
              <div style="color: black; text-align: center;flex: 1;" class="base-item-title-font-size">{{item.name}}</div>
              <div style="flex: 1;">
                <div class="base-tag-two row-column-item-tag-row">
                  <div class="tag-left">机台号：</div>
                  <div class="tag-right">{{item.welder && item.welder.oneAxis ? item.welder.oneAxis.mid : "-"}}</div>
                </div>
              </div>
              <div style="flex: 1;">
                <div class="base-tag-two row-column-item-tag-row">
                  <div class="tag-left">条码：</div>
                  <div class="tag-right">{{item.welder && item.welder.oneAxis ? item.welder.oneAxis.code : "-"}}</div>
                </div>
              </div>
              <div style="flex: 1;">
                <div class="base-tag-two row-column-item-tag-row">
                  <div class="tag-left">产量：</div>
                  <div class="tag-right">{{item.welder && item.welder.oneAxis ? item.welder.oneAxis.output : "-"}}</div>
                </div>
              </div>
              <div style="flex: 1;">
                <div class="base-tag-two row-column-item-tag-row">
                  <div class="tag-left">机台号：</div>
                  <div class="tag-right">{{item.welder && item.welder.twoAxis ? item.welder.twoAxis.mid : "-"}}</div>
                </div>
              </div>
              <div style="flex: 1;">
                <div class="base-tag-two row-column-item-tag-row">
                  <div class="tag-left">条码：</div>
                  <div class="tag-right">{{item.welder && item.welder.twoAxis ? item.welder.twoAxis.code : "-"}}</div>
                </div>
              </div>
              <div style="flex: 1;">
                <div class="base-tag-two row-column-item-tag-row">
                  <div class="tag-left">产量：</div>
                  <div class="tag-right">{{item.welder && item.welder.twoAxis ? item.welder.twoAxis.output : "-"}}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-for="(item, index) in cutterList" :key="'cutter_' + index" class="row-column">
          <div class="row-column-container">
            <div style="padding: 10px;display: flex; flex-direction: column; height: 100%;box-sizing: border-box;">
              <div style="color: black; text-align: center;flex: 1;" class="base-item-title-font-size">{{item.name}}</div>
              <div style="flex: 1;">
                <div class="base-tag-two base-btn row-column-item-tag-row">
                  <div class="tag-left">机台号：</div>
                  <div class="tag-right">{{item.cutter ? item.cutter.axis.mid : "-"}}</div>
                </div>
              </div>
              <div style="flex: 1;">
                <div class="base-tag-two base-btn row-column-item-tag-row-status" :style="{background: getStatusColor(item.cutter && item.cutter.axis ? item.cutter.axis.status : null)}">
                  <div class="tag-left">条码：</div>
                  <div class="tag-right">{{item.cutter ? item.cutter.axis.code : "-"}}</div>
                </div>
              </div>
              <div style="flex: 1;">
                <div class="base-tag-two base-btn row-column-item-tag-row">
                  <div class="tag-left">产量：</div>
                  <div class="tag-right">{{item.cutter ? item.cutter.axis.output : "-"}}</div>
                </div>
              </div>
              <div style="flex: 1;" class="row-column-item-tag">
                <el-tag type="success" effect="dark" color="#328080" class="base-tag-two base-btn row-column-item-tag-content-item border-color-null">
                  高度U：{{item.cutter ? item.cutter.detail.a : "-"}}
                </el-tag>
                <el-tag type="info" effect="dark" color="#328080" class="base-tag-two base-btn row-column-item-tag-content-item border-color-null">
                  高度4：{{item.cutter ? item.cutter.detail.d : "-"}}
                </el-tag>
              </div>
              <div style="flex: 1;" class="row-column-item-tag">
                <el-tag type="success" effect="dark" color="#328080" class="base-tag-two base-btn row-column-item-tag-content-item border-color-null">
                  高度V：{{item.cutter ? item.cutter.detail.b : "-"}}
                </el-tag>
                <el-tag type="info" effect="dark" color="#328080" class="base-tag-two base-btn row-column-item-tag-content-item border-color-null">
                  高度5：{{item.cutter ? item.cutter.detail.e : "-"}}
                </el-tag>
              </div>
              <div style="flex: 1;" class="row-column-item-tag">
                <el-tag type="success" effect="dark" color="#328080" class="base-tag-two base-btn row-column-item-tag-content-item border-color-null">
                  高度W：{{item.cutter ? item.cutter.detail.c : "-"}}
                </el-tag>
                <el-tag type="info" effect="dark" color="#328080" class="base-tag-two base-btn row-column-item-tag-content-item border-color-null">
                  高度6：{{item.cutter ? item.cutter.detail.f : "-"}}
                </el-tag>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="container-item-content-two item-two">
      <div class="row-container-info">
        <div v-for="(item, index) in powerOnList" :key="'powerOn_' + index" class="row-container-info-fourth row-column">
          <div class="row-column-container">
            <div style="padding: 10px; box-sizing: border-box;display: flex; flex-direction: column; height: 100%;box-sizing: border-box;">
              <div style="display: flex; justify-content: space-between;">
                <div class="header-left" style="display: flex;">
                  <el-tag effect="dark" color="#328080" style="width: fit-content" class="base-tag-opf base-btn row-column-item-tag-base border-color-null">机台号：{{item.powerOn && item.powerOn.axis ? item.powerOn.axis.mid : "-"}}</el-tag>
                </div>
                <div class="header-center base-item-title-font-size" style="color: black;">{{item.name}}</div>
                <div class="header-right" style="display: flex;justify-content: right;">
                  <el-tag effect="dark" :color="getStatusColor(item.powerOn && item.powerOn.axis ? item.powerOn.axis.status : null)" style="width: fit-content" class="base-tag-opf base-btn row-column-item-tag-base border-color-null">条码：{{item.powerOn && item.powerOn.axis ? item.powerOn.axis.code : "-"}}</el-tag>
                </div>
              </div>
              <div style="flex: 1; padding-top: 20px;">
                <div style="width: 100%;height: 100%;">
                  <div class="sub-container">
                    <div class="sub-container-column">
                      <div style="display: flex; flex-direction: column; height: 100%;">
                        <div style="flex: 1;" class="row-column-item-tag">
                          <el-tag type="success" effect="dark" color="#328080" class="base-tag-two row-column-item-tag-content-item-all base-btn border-color-null">电阻U-V：{{item.powerOn && item.powerOn.detail ? item.powerOn.detail.uv : "-"}}</el-tag>
                        </div>
                        <div style="flex: 1;" class="row-column-item-tag">
                          <el-tag type="success" effect="dark" color="#328080" class="base-tag-two row-column-item-tag-content-item-all base-btn border-color-null">电阻U-W：{{item.powerOn && item.powerOn.detail ? item.powerOn.detail.uw : "-"}}</el-tag>
                        </div>
                        <div style="flex: 1;" class="row-column-item-tag">
                          <el-tag type="success" effect="dark" color="#328080" class="base-tag-two row-column-item-tag-content-item-all base-btn border-color-null">电阻V-W：{{item.powerOn && item.powerOn.detail ? item.powerOn.detail.vw : "-"}}</el-tag>
                        </div>
                        <div style="flex: 1;" class="row-column-item-tag">
                          <el-tag type="success" effect="dark" color="#328080" class="base-tag-two row-column-item-tag-content-item-all base-btn border-color-null">电阻不平：{{item.powerOn && item.powerOn.detail ? item.powerOn.detail.uvw : "-"}}</el-tag>
                        </div>
                      </div>
                    </div>
                    <div class="sub-container-column">
                      <div style="display: flex; flex-direction: column; height: 100%;">
                        <div style="flex: 1;" class="row-column-item-tag">
                          <el-tag type="success" effect="dark" color="#328080" class="base-tag-two row-column-item-tag-content-item-all base-btn border-color-null">匝间1：{{item.powerOn && item.powerOn.detail ? item.powerOn.detail.a : "-"}}</el-tag>
                        </div>
                        <div style="flex: 1;" class="row-column-item-tag">
                          <el-tag type="success" effect="dark" color="#328080" class="base-tag-two row-column-item-tag-content-item-all base-btn border-color-null">匝间2：{{item.powerOn && item.powerOn.detail ? item.powerOn.detail.b : "-"}}</el-tag>
                        </div>
                        <div style="flex: 1;" class="row-column-item-tag">
                          <el-tag type="success" effect="dark" color="#328080" class="base-tag-two row-column-item-tag-content-item-all base-btn border-color-null">匝间3：{{item.powerOn && item.powerOn.detail ? item.powerOn.detail.c : "-"}}</el-tag>
                        </div>
                        <div style="flex: 1;" class="row-column-item-tag">
                          <el-tag effect="dark" color="#00FF61" class="base-tag-two row-column-item-tag-content-item-all base-btn border-color-null">统计OK：{{item.powerOn && item.powerOn.axis ? item.powerOn.axis.ok : "-"}}</el-tag>
                        </div>
                      </div>
                    </div>
                    <div class="sub-container-column">
                      <div style="display: flex; flex-direction: column; height: 100%;">
                        <div style="flex: 1;" class="row-column-item-tag">
                          <el-tag type="success" effect="dark" color="#328080" class="base-tag-two row-column-item-tag-content-item-all base-btn border-color-null">匝间4：{{item.powerOn && item.powerOn.detail ? item.powerOn.detail.d : "-"}}</el-tag>
                        </div>
                        <div style="flex: 1;" class="row-column-item-tag">
                          <el-tag type="success" effect="dark" color="#328080" class="base-tag-two row-column-item-tag-content-item-all base-btn border-color-null">匝间5：{{item.powerOn && item.powerOn.detail ? item.powerOn.detail.e : "-"}}</el-tag>
                        </div>
                        <div style="flex: 1;" class="row-column-item-tag">
                          <el-tag type="success" effect="dark" color="#328080" class="base-tag-two row-column-item-tag-content-item-all base-btn border-color-null">匝间6：{{item.powerOn && item.powerOn.detail ? item.powerOn.detail.f : "-"}}</el-tag>
                        </div>
                        <div style="flex: 1;" class="row-column-item-tag">
                          <el-tag effect="dark" color="#FF822B" class="base-tag-two row-column-item-tag-content-item-all base-btn border-color-null">统计NG：{{item.powerOn && item.powerOn.axis ? item.powerOn.axis.ng : "-"}}</el-tag>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="row-container-info-eighth row-column">
          <div class="row-column-container-base">
            <div style="box-sizing: border-box;display: flex; flex-direction: column; height: 85%;">
              <div class="sub-container-three">
                <div class="sub-container-column item-background">
                  <div v-for="(item, index) in testerList" :key="'tester_' + index" style="padding: 10px; box-sizing: border-box; display: flex; flex-direction: column; height: 100%;">
                    <div style="color: black; text-align: center;flex: 1;" class="base-item-title-font-size">{{item.name}}</div>
                    <div style="flex: 1;">
                      <div class="base-tag-opf row-column-item-tag-row border-color-null">
                        <div class="tag-left">机台号：</div>
                        <div class="tag-right">{{item.tester && item.tester.axis ? item.tester.axis.mid : "-"}}</div>
                      </div>
                    </div>
                    <div style="flex: 1;">
                      <div class="base-tag-opf row-column-item-tag-row-status border-color-null" :style="{background: getStatusColor(item.tester && item.tester.axis ? item.tester.axis.status : null)}">
                        <div class="tag-left">条码：</div>
                        <div class="tag-right">{{item.tester && item.tester.axis ? item.tester.axis.code : "-"}}</div>
                      </div>
                    </div>
                    <div style="flex: 1;" class="row-column-item-tag">
                      <div class="tag-row-left"><el-tag effect="dark" color="#328080" class="base-tag-opf base-btn row-column-item-tag-content border-color-null">通电A</el-tag></div>
                      <div class="tag-row-center"><el-tag effect="dark" :color="item.tester && item.tester.axis && item.tester.detail.a == 1 ? '#00FF61' : '#909399'" class="base-tag-opf base-btn row-column-item-tag-content border-color-null">1</el-tag></div>
                      <div class="tag-row-right"><el-tag effect="dark" :color="item.tester && item.tester.axis && item.tester.detail.a != 1 ? '#FF822B' : '#909399'" class="base-tag-opf base-btn row-column-item-tag-content border-color-null">0</el-tag></div>
                    </div>
                    <div style="flex: 1;" class="row-column-item-tag">
                      <div class="tag-row-left"><el-tag effect="dark" color="#328080" class="base-tag-opf base-btn row-column-item-tag-content border-color-null">通电B</el-tag></div>
                      <div class="tag-row-center"><el-tag effect="dark" :color="item.tester && item.tester.axis && item.tester.detail.b == 1 ? '#00FF61' : '#909399'" class="base-tag-opf base-btn row-column-item-tag-content border-color-null">1</el-tag></div>
                      <div class="tag-row-right"><el-tag effect="dark" :color="item.tester && item.tester.axis && item.tester.detail.b != 1 ? '#FF822B' : '#909399'" class="base-tag-opf base-btn row-column-item-tag-content border-color-null">0</el-tag></div>
                    </div>
                    <div style="flex: 1;" class="row-column-item-tag">
                      <div class="tag-row-left"><el-tag effect="dark" color="#328080" class="base-tag-opf base-btn row-column-item-tag-content border-color-null">通电C</el-tag></div>
                      <div class="tag-row-center"><el-tag effect="dark" :color="item.tester && item.tester.axis && item.tester.detail.c == 1 ? '#00FF61' : '#909399'" class="base-tag-opf base-btn row-column-item-tag-content border-color-null">1</el-tag></div>
                      <div class="tag-row-right"><el-tag effect="dark" :color="item.tester && item.tester.axis && item.tester.detail.c != 1 ? '#FF822B' : '#909399'" class="base-tag-opf base-btn row-column-item-tag-content border-color-null">0</el-tag></div>
                    </div>
                    <div style="flex: 1;">
                      <div class="base-tag-opf row-column-item-tag-row border-color-null">
                        <div class="tag-left">产量：</div>
                        <div class="tag-right">{{item.tester && item.tester.axis ? item.tester.axis.output : "-"}}</div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="sub-container-column item-background">
                  <div v-for="(item, index) in blankerList" :key="'blanker_' + index" style="padding: 10px; box-sizing: border-box; display: flex; flex-direction: column; height: 100%;">
                    <div style="color: black; text-align: center;flex: 1;" class="base-item-title-font-size">{{item.name}}</div>
                    <div style="flex: 1;">
                      <div class="base-tag-two row-column-item-tag-row-status border-color-null" :style="{background: getStatusColor(item.blanker && item.blanker.axis ? item.blanker.axis.status : null)}">
                        <div class="tag-left">条码：</div>
                        <div class="tag-right">{{item.blanker && item.blanker.axis ? item.blanker.axis.code : "-"}}</div>
                      </div>
                    </div>
                    <div style="flex: 1;">
                      <div class="base-tag-two row-column-item-tag-row border-color-null ok-bg">
                        <div class="tag-left">统计OK：</div>
                        <div class="tag-right">{{item.blanker && item.blanker.axis ? item.blanker.axis.ok : "-"}}</div>
                      </div>
                    </div>
                    <div style="flex: 1;">
                      <div class="base-tag-two row-column-item-tag-row border-color-null ng-bg">
                        <div class="tag-left">统计NG：</div>
                        <div class="tag-right">{{item.blanker && item.blanker.axis ? item.blanker.axis.ng : "-"}}</div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="sub-container-column item-chat-background">
                  <div style="display: flex; flex-direction: column; height: 100%;">
                    <div class="chat-container">
                      <div class="chat-container-top">
                        <BarChart height="15vh" :key="charts.produce.key" :ref="charts.produce.key" :title="charts.produce.title" :dataList="charts.produce.data" :percentageData="charts.produce.percentageData"></BarChart>
                      </div>
                      <div class="chat-container-bottom">
                        <PieChart height="15vh" :key="charts.quality.key" :ref="charts.quality.key" :title="charts.quality.title" :dataList="charts.quality.data" :percentageData="charts.quality.percentageData"></PieChart>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div style="height: 15%; padding-top: 5px; box-sizing: border-box;display: flex;">
              <el-button type="info" @click="openReportWin" style="height: 100%;width: 15%;" class="base-tag base-btn border-color-null">报表</el-button>
              <el-button type="danger" @click="openTraceWin" style="height: 100%;width: 15%;" class="base-tag base-btn border-color-null">追溯</el-button>
              <el-button-group class="base-tag base-btn border-color-null" style="height: 100%;width: 70%;border-radius: 4px;margin-left: 10px;">
                <el-button type="primary" style="height: 100%;width: 80%;background: white; color: blue" class="base-tag base-btn border-color-null">总产量：{{totalOutput}}</el-button>
                <el-button type="danger" @click="clearTotalOutputDate" style="height: 100%;width: 20%;" class="base-tag base-btn border-color-null">清零</el-button>
              </el-button-group>
            </div>
          </div>
        </div>
      </div>
    </div>


    <el-dialog
      :title="dialog.trace.title"
      :visible.sync="dialog.trace.visible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      custom-class="custom-dialog"
      :destroy-on-close="true"
      :body-style="{ maxHeight: 'calc(100vh - 210px)', overflow: 'auto' }"
      width="30%">
      <span>
        <ProductTrace :is-search="true"></ProductTrace>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button class="custom-btn-cancel" @click="dialog.trace.visible = false">关 闭</el-button>
      </span>
    </el-dialog>

    <el-drawer
      :title="dialog.report.title"
      :visible.sync="dialog.report.visible"
      :wrapperClosable="false"
      :destroy-on-close="true"
      :close-on-press-escape="false"
      custom-class="custom-drawer"
      size="85%"
      direction="rtl">
      <div style="padding: 20px">
        <Report v-if="dialog.report.visible"></Report>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import dayjs from 'dayjs';
import PieChart from "./assembly/PieChart";
import BarChart from "./assembly/BarChart";
import Report from "./Report";
import ProductTrace from "./ProductTrace";
import {
  clearTotalOutput,
  getDateOutputStatistics,
  getMassStatistics,
  getModuleList,
  getModuleStatus,
  getTotalOutput
} from "../request/Api";
import {Message} from "element-ui";

export default {
  name: 'BIndex',
  components: {
    BarChart,
    PieChart,
    Report,
    ProductTrace
  },
  data () {
    return {
      projectTitle: window.g.projectTitle,
      timeFormat: "YYYY-MM-DD HH:mm:ss",
      subtitle: window.g.subtitle,
      datetime: "-",
      datetimeTask: null,
      refreshTask: null,
      winderList: [],
      welderList: [],
      cutterList: [],
      powerOnList: [],
      testerList: [],
      blankerList: [],
      moduleIds: [],
      totalOutput: 0,
      charts: {
        produce: {
          title: "生\n产\n效\n率",
          percentageData: true,
          key: "produce_chat",
          data: []
        },
        quality: {
          title: "质\n量\n百\n分\n比",
          percentageData: true,
          key: "quality_chat",
          data: [{name:"OK", color: '#00FF61', value:"0"},{name:"NG", color: '#FF822B', value:"0"}]
        }
      },
      dialog: {
        trace: {
          title: "追溯",
          visible: false
        },
        report: {
          title: "报表",
          visible: false
        }
      }
    }
  },
  mounted() {
    if (window.g.timeFormat) {
      this.timeFormat = window.g.timeFormat;
    }
    this.setDatetimeTask();
    this.setDatetime();
    this.addWinChangeEvent();
    this.initData();
  },
  methods: {
    openReportWin() {
      this.dialog.report.visible = true;
    },
    openTraceWin() {
      this.dialog.trace.visible = true;
    },
    initData() {
      this.getDriverModuleList();
      this.refreshTotalOutput();
      this.refreshMassStatisticsData();
      this.refreshDateOutputStatisticsData();
      this.setRefreshTask();
    },
    getDriverModuleList() {
      getModuleList({}).then(res => {
        if (res.code == 0) {
          if (res.data) {
            for (let i = 0; i < res.data.modules.length; i++) {
              let moduleInfo = res.data.modules[i];
              this.moduleIds.push(moduleInfo.id);
              if (moduleInfo.type == 1) {
                this.winderList.push({
                  id: moduleInfo.id,
                  name: moduleInfo.name,
                  type: moduleInfo.type,
                  winder: null
                })
              } else if (moduleInfo.type == 2) {
                this.welderList.push({
                  id: moduleInfo.id,
                  name: moduleInfo.name,
                  type: moduleInfo.type,
                  welder: null
                })
              } else if (moduleInfo.type == 3) {
                this.cutterList.push({
                  id: moduleInfo.id,
                  name: moduleInfo.name,
                  type: moduleInfo.type,
                  cutter: null
                })
              } else if (moduleInfo.type == 4) {
                this.powerOnList.push({
                  id: moduleInfo.id,
                  name: moduleInfo.name,
                  type: moduleInfo.type,
                  powerOn: null
                })
              } else if (moduleInfo.type == 5) {
                this.testerList.push({
                  id: moduleInfo.id,
                  name: moduleInfo.name,
                  type: moduleInfo.type,
                  tester: null
                })
              } else if (moduleInfo.type == 6) {
                this.blankerList.push({
                  id: moduleInfo.id,
                  name: moduleInfo.name,
                  type: moduleInfo.type,
                  blanker: null
                })
              }
            }
            this.refreshStatusData();
          }
        } else {
          Message.error(res.msg);
        }
      })
    },
    refreshStatusData() {
      getModuleStatus({ids: this.moduleIds}).then(res => {
        if (res.code == 0) {
          for (let i = 0; i < res.data.moduleStatuss.length; i++) {
            let moduleStatus = res.data.moduleStatuss[i];
            if (moduleStatus.type == 1) {
              this.winderList.forEach(function (item) {
                if (item.id == moduleStatus.id) {
                  item.winder = moduleStatus.winder
                }
              })
            } else if (moduleStatus.type == 2) {
              this.welderList.forEach(function (item) {
                if (item.id == moduleStatus.id) {
                  item.welder = moduleStatus.welder
                }
              })
            } else if (moduleStatus.type == 3) {
              this.cutterList.forEach(function (item) {
                if (item.id == moduleStatus.id) {
                  item.cutter = moduleStatus.cutter
                }
              })
            } else if (moduleStatus.type == 4) {
              this.powerOnList.forEach(function (item) {
                if (item.id == moduleStatus.id) {
                  item.powerOn = moduleStatus.powerOn
                }
              })
            } else if (moduleStatus.type == 5) {
              this.testerList.forEach(function (item) {
                if (item.id == moduleStatus.id) {
                  item.tester = moduleStatus.tester
                }
              })
            } else if (moduleStatus.type == 6) {
              this.blankerList.forEach(function (item) {
                if (item.id == moduleStatus.id) {
                  item.blanker = moduleStatus.blanker
                }
              })
            }
          }
        } else {
          Message.error(res.msg);
        }
      })
    },
    refreshTotalOutput() {
      getTotalOutput({}).then(res => {
        if (res.code == 0) {
          this.totalOutput = res.data.output;
        } else {
          Message.error(res.msg);
        }
      })
    },
    refreshMassStatisticsData() {
      getMassStatistics({}).then(res => {
        if (res.code == 0) {
          let chatDatas =  [{name:"OK", color: '#00FF61', value: res.data.ok},{name:"NG", color: '#FF822B', value: res.data.ng}]
          let comp = this.getComponent(this.charts.quality.key);
          if (comp && comp.setData) {
            comp.setData(chatDatas);
          }
        } else {
          Message.error(res.msg);
        }
      })
    },
    refreshDateOutputStatisticsData() {
      getDateOutputStatistics({n: 5}).then(res => {
        if (res.code == 0) {
          let chatDatas = [];
          for (let i = 0; i < res.data.dateOutput.length; i++) {
            chatDatas.push({name: res.data.dateOutput[i].date, values: [{label: "产量", color: '#00FF61', value: res.data.dateOutput[i].output}]})
          }
          let comp = this.getComponent(this.charts.produce.key);
          if (comp && comp.setData) {
            comp.setData(chatDatas);
          }
        } else {
          Message.error(res.msg);
        }
      })
    },
    setRefreshTask() {
      this.refreshTask = setInterval(this.refreshData, window.g.moduleStatusRefreshTime);
    },
    refreshData() {
      this.refreshTotalOutput();
      this.refreshStatusData();
      this.refreshMassStatisticsData();
      this.refreshDateOutputStatisticsData();
    },
    clearTotalOutputDate() {
      this.$confirm('确定清零?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        customClass: 'custom-confirm',
        confirmButtonClass: 'custom-btn-primary',
        cancelButtonClass: 'custom-btn-cancel'
      }).then(() => {
        clearTotalOutput({}).then(res => {
          if (res.code == 0) {
            Message.success("清零成功");
            this.refreshTotalOutput();
          } else {
            Message.error(res.msg);
          }
        })
      }).catch(() => {
      });
    },
    setDatetimeTask() {
      this.datetimeTask = setInterval(this.setDatetime, 1000);
    },
    setDatetime() {
      this.datetime = dayjs().format(this.timeFormat);
    },
    addWinChangeEvent() {
      window.addEventListener("resize", this.sendChildrenComponent)
    },
    sendChildrenComponent() {
      const allChildren = this.findAllChildren(this);
      if (allChildren && allChildren.length > 0) {
        allChildren.forEach(function (child) {
          if (child && child.changeWidth) {
            child.changeWidth();
          }
        })
      }
    },
    findAllChildren(component, children = []) {
      if (!component.$children) return children;
      component.$children.forEach(child => {
        children.push(child);
        this.findAllChildren(child, children);
      });
      return children;
    },
    getComponent(name) {
      let comps = this.$refs[name];
      if (comps) {
        if (Array.isArray(comps) && comps.length > 0) {
          return comps[0];
        } else {
          return comps;
        }
      }
      return null
    },
    getStatusColor(status) {
      if (status != null) {
        if (status == 0) {
          return "#FF822B";
        } else if (status == 1) {
          return "#00FF61";
        }
      }
      return "#909399";
    }
  },
  beforeDestroy() {
    if (this.datetimeTask) {
      clearInterval(this.datetimeTask)
    }
    if (this.refreshTask) {
      clearInterval(this.refreshTask)
    }
  }
}
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #004bf4;
}
.container-item-header {
  height: 6vh;
  /*background: black;*/
  display: grid;
  padding: 1vh;
}
.container-item-content-one {
  height: 54vh;
}
.container-item-content-two {
  height: 40vh;
}
.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header-left {
  margin-right: auto;
  width: 35%;
}
.header-center {
  text-align: center;
}
.header-right {
  margin-left: auto;
  width: 35%;
  text-align: right;
}
.base-item-title-font-size {
  font-size: 1.3vw;
}
.subtitle-class {
  color: #DF00F5;
  font-weight: 300;
  font-size: 1.3vw;
}
.project-title-class {
  color: rgb(255 255 255 / 1);
  font-weight: 500;
  font-family: Roboto Mono, monospace;
  text-align: center;
  font-size: 1.4vw;
}
.datetime-class {
  font-family: "Share Tech Mono", monospace;
  color: #00FF4B;
  font-weight: 300;
  font-size: 1.3vw;
}
.item-one {

}
.row-container {
  display: flex;
  height: 100%;
}
.row-column {
  flex: 1;
  padding: 3px;
  box-sizing: border-box;
}

.row-column-container-base {
  width: 100%;
  height: 100%;
}

.item-background {
  background: #c1c1c1;
  border: 1px solid #ED60E0;
}

.item-chat-background {
  /*background: #0d5ab0;*/
  background: #004bf4;
  border: 1px solid #ED60E0;
}

.danger-btn-background {
  background: #8200FE;
  border: 1px solid #ED60E0;
}
.row-column-container {
  width: 100%;
  height: 100%;
  background: #c1c1c1;
  border: 1px solid #ED60E0;
}

.row-column-item-tag {
  display: flex;
  justify-content: space-between;
}
.base-tag {
  font-size: 1vw;
  height: 2vw;
  line-height: 2.5vw;
}
.base-tag-opf {
  font-size: 1vw;
  height: 2vw;
  line-height: 2.5vw;
}
.base-tag-two {
  font-size: 1vw;
  height: 3vw;
  line-height: 2.5vw;
}
.border-color-null {
  border-color: rgba(0, 0, 0, 0);
}

.base-btn {
  display: flex;
  justify-content: center;
  align-items: center;
}
.row-column-item-tag-base {
  text-align: center
}
.row-column-item-tag-content {
  width: 100%;
  text-align: center
}
.row-column-item-tag-content-item {
  width: 49%;
  text-align: center
}
.row-column-item-tag-content-item-all {
  width: 100%;
  text-align: center
}
.row-column-item-tag-row {
  width: 100%;
  background: #328080;
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  box-sizing: border-box;
}
.row-column-item-tag-row-status {
  width: 100%;
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  box-sizing: border-box;
}
.margin-top-10 {
  margin-top: 10px;
}
.row-container-info {
  display: flex;
  height: 100%;
}
.row-container-info-fourth {
  flex: 0 0 calc(4/7 * 100%);
}
.row-container-info-eighth {
  flex: 0 0 calc(3/7 * 100%);
}
.sub-container-three {
  display: flex;
  width: 100%;
  height: 100%;
  gap: 5px;
}
.sub-container {
  display: flex;
  width: 100%;
  height: 100%;
  gap: 20px;
}
.sub-container-column {
  flex: 1;
}
.base-bg {
  background: #328080;
}

.ok-bg {
  background: #00FF61;
}

.ng-bg {
  background: #FF822B;
}
.chat-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.chat-container-top {
  flex: 1;
  border-bottom: 1px solid #ED60E0;
}
.chat-container-bottom {
  flex: 1;
}
.trace-info-line {
  line-height: 5vh;
}
.tag-row-left {
  width: 100%;
  padding-right: 2px;
}
.tag-row-center {
  width: 100%;
  padding-right: 1px;
  padding-left: 1px;
}
.tag-row-right {
  width: 100%;
  padding-left: 2px;
}

</style>
